<template>
	<div>
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120"></textarea>
		<mt-button type="primary" size="large">发表评论</mt-button>
		<div class="cm-list" v-for="(item,i) in comments" :key="i">
			<div class="item">
				<div class="cmt-title">
					第{{i+1}}楼 &nbsp; &nbsp;用户：匿名用户&nbsp; &nbsp;
					发表时间：{{item.add_time | dataFormat}}
				</div>
				<div class="cmt-body">
					{{item.content}}
				</div>
			</div>
		</div>
		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
import {Toast} from 'mint-ui'

export default {
	name: "comment.vue",
	data() {
		return {
			pageIndex: 1, //默认展示第一页数据
			comments: []  //所有评论的数据
		}
	},
	created() {
		this.getComment();
	},
	methods: {
		getComment() {
			this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageIndex).then(result => {
				if (result.body.status === 0) {
					this.comments = this.comments.concat(result.body.message);
				} else {
					Toast('获取评论失败');
				}
			})
		},  //请求页面数据
		getMore(){
			this.pageIndex ++;
			this.getComment();
		} 	//加载更多
	},
	props: [
		'id'
	]
}
</script>

<style scoped>
	h3 {
		font-size: 18px;
	}

	textarea {
		font-size: 14px;
		height: 85px;
		margin: 0;
	}

	.cmt-title {
		margin-top: 5px;
		background-color: #cccccc;
		font-size: 13px;
		line-height: 30px;
	}

	.cmt-body {
		font-size: 13px;
		line-height: 35px;
		text-indent: 2em;
	}

</style>